<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-step-wizard
        style="min-height: 400px"
        :stepData="stepData"
        :active="active"
        :successTitle="successTitle"
        @complete="complete"
      >
        <template #first>第一步</template>
        <template #second>第二步骤</template>
        <template #third>第三步骤</template>
      </t-step-wizard>
    </t-layout-page-item>
  </t-layout-page>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      stepData: [
        {
          id: 1,
          title: "创建账户",
          slotName: "first",
          btnArr: [
            {
              btnTitle: "下一步",
              params: 1,
              fn: this.next,
            },
          ],
        },
        {
          id: 2,
          title: "填写基础信息",
          slotName: "second",
          btnArr: [
            {
              btnTitle: "上一步",
              params: 2,
              fn: this.back,
            },
            {
              btnTitle: "下一步",
              params: 2,
              fn: this.next,
            },
          ],
        },
        {
          id: 3,
          title: "填写用户信息",
          slotName: "third",
          btnArr: [
            {
              btnTitle: "上一步",
              params: 3,
              fn: this.back,
            },
            {
              btnTitle: "下一步",
              params: 3,
              fn: this.next,
            },
          ],
        },
        {
          id: 4,
          title: "注册成功",
          // lastBtnArr: [
          //   {
          //     btnTitle: '上一步',
          //     params: 4,
          //     fn: this.back
          //   },
          //   {
          //     btnTitle: '下一步',
          //     params: 4,
          //     fn: this.next
          //   }
          // ]
        },
      ],
      // lastBtnTitle: '提交资料',
      successTitle:
        "企业信息填写完成，等待提交认证资料，经*****平台审核通过后即可办理业务",
    };
  },
  methods: {
    // 下一步
    next(val) {
      switch (val.params) {
        case 1:
          this.active += 1;
          break;
        case 2:
          this.active += 1;
          break;
        case 3:
          this.active += 2;
          break;
        case 4:
          console.log(22222222222);
          break;
      }
    },
    // 上一步
    back(val) {
      switch (val.params) {
        case 2:
          this.active -= 1;
          break;
        case 3:
          this.active -= 1;
          break;
        case 4:
          console.log(111111111);
          break;
      }
    },
    // 完成
    complete() {
      this.active = 0;
    },
  },
};
</script>
